<template>
  <div>
       <el-container>
            <el-header>
                <Header></Header>
            </el-header>
            <el-main>
                 <el-image :src="require('../../../img/vaccin/sloganHeader.jpg')"></el-image>
                <br><br><br><br>
                <el-row>
                    <el-col :span=17 offset="1">
                         <el-table stripe :data="tVaccinList" border size="mini" header-cell-class-name="header-row">
                        
                            <el-table-column prop="vaccinName" label="姓名" header-align="center" width="100px"></el-table-column>
                            <el-table-column prop="vaccinIdCard" label="身份证号" header-align="center" width="200px"></el-table-column>
                            <el-table-column prop="vaccinPhone" label="电话" header-align="center"></el-table-column>
                            <el-table-column prop="tVaccinDept.deptName" label="厂家" header-align="center"></el-table-column>
                            <el-table-column prop="tVaccinDept.vaccinType" label="疫苗类型" header-align="center"></el-table-column>
                            <el-table-column prop="" label="接种针数" header-align="center" width="100px">
                                <template slot-scope="scope">
                                第{{scope.row.vaccinCount}}针
                                </template>
                            </el-table-column>
                            <el-table-column prop="" label="接种时间" header-align="center">
                            <template slot-scope="scope">
                                {{scope.row.vaccinDate | dateFormat}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="vaccinAddress" label="接种地点" header-align="center" width="200px"></el-table-column>
                        
                        </el-table>
                    </el-col>
                    <el-col :span=5 offset="1">
                        <div style="width:300px;text-align:left">
                            <br><br><br>
                            <el-image :src="require('../../../img/vaccin/rigth1.jpg')"></el-image>
                            <h3>小编精选</h3>
                            <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                                <el-row>
                                    <el-col :span="11">
                                        <el-image style="width:130px;" :src="require('../../../img/vaccin/rigth2.jpg')"></el-image>
                                    </el-col>
                                    <el-col :span="12">
                                        2021年党龄50年补贴5000元政策：党龄多少发5000元？附中央最新补贴消息
                                    </el-col>
                                </el-row>
                            </div>
                            <div style="width:300px;text-align:left;background-color:gainsboro;margin-top:10px;height:87px">
                                <el-row>
                                    <el-col :span="11">
                                        <el-image style="width:130px;" :src="require('../../../img/vaccin/rigth3.jpg')"></el-image>
                                    </el-col>
                                    <el-col :span="12">
                                        北京生物和科兴中维可以混打吗？为何很多人不打科兴疫苗？
                                    </el-col>
                                </el-row>
                            </div>
                           
                           
                            
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
  </div>
</template>

<script>
import Header from '../../../components/home/Head.vue'
import axios from 'axios'

export default {
    data() {
        return {
            tVaccinList: []
        }
    },
    components:{
            Header
    },
    created(){
        axios.post("/tVaccinNote/queryAllTVaccinNote").then((response)=>{
            this.tVaccinList=response.data;
        })
    },  
    filters:{
        dateFormat:function(data){
          var dt=new Date(data)
          var n=dt.getFullYear();
          var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
          var r=(dt.getDate()).toString().padStart(2,"0");
          dt.getHours();
          dt.getMinutes();
          dt.getSeconds();
          return n+"-"+y+"-"+r;
  }
  }
}
</script>

<style>

</style>